<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 爱宠之家</title>
    <link rel="stylesheet" href="/dev/plugins/bootstrap/css/bootstrap.css">
    <style>
        .auth-container {
            min-height: calc(100vh - 76px - 300px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 0;
        }

        .auth-card {
            width: 100%;
            max-width: 400px;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        .navbar-brand {
            font-weight: bold;
            color: #337ab7;
        }

        .back-to-home {
            margin-bottom: 1rem;
        }

        .login-link {
            text-align: center;
            margin-top: 1rem;
        }
    </style>
</head>

<body>
    <!-- 简化导航栏 -->
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="../../index.html">爱宠之家</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/dev/views/index.html">首页</a></li>
                    <li><a href="../adoption/adoption.html">宠物领养</a></li>
                    <li><a href="../cats/cats.html">猫咪选购</a></li>
                    <li><a href="../large-dogs/large-dogs.html">小型犬选购</a></li>
                    <li><a href="../large-dogs/large-dogs.html">大型犬选购</a></li>
                    <li><a href="../food/food.html">宠物用品</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 注册区域 -->
    <div class="auth-container">
        <div class="auth-card bg-white">
            <div class="back-to-home">
                <a href="../../index.html"><i class="bi bi-arrow-left"></i> 返回首页</a>
            </div>

            <h3 class="text-center mb-4">账号注册</h3>

            <!-- 注册表单 -->
            <form id="registerForm">
                <div class="mb-3">
                    <label class="form-label">请输入邮箱</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                        <span class="input-group-btn">
                            <button class="btn btn-success" type="button" onclick="sendCode()">发送验证码</button>
                        </span>
                    </div>
                    <span class="text-danger" id="email_span" style="display: none">邮箱格式不正确或已被注册!</span>
                </div>
<!--                <div class="mb-3">-->
<!--                    <label class="form-label">验证码</label>-->
<!--                    <input type="text" class="form-control" id="code" placeholder="请输入验证码" required>-->
<!--                    <span class="text-danger" id="code_span" style="display: none">验证码不正确!</span>-->
<!--                </div>-->
                <div class="mb-3">
                    <label class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">设置密码</label>
                    <input type="password" class="form-control" id="password" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">确认密码</label>
                    <input type="password" class="form-control" id="confirmPassword" required>
                    <span class="text-danger" id="password_span" style="display: none">两次输入的密码不一致!</span>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="agreeTerms" required>
                    <label class="form-check-label" for="agreeTerms">
                        我已阅读并同意<a href="#">服务条款</a>和<a href="#">隐私政策</a>
                    </label>
                </div>
                <button type="submit" class="btn btn-primary w-100">注册</button>
            </form>

            <!-- 登录链接 -->
            <div class="login-link">
                <p>已有账号？<a href="../index.html">立即登录</a></p>
            </div>
        </div>
    </div>

    <!-- 简化页脚 -->
    <footer class="mt-5 py-4 bg-light">
        <div class="container">
            <div class="text-center">
                <p class="mb-0">Copyright © 2024 爱宠之家 All Rights Reserved</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <!--    <script src="../../plugins/jquery/jquery.min.js"></script>-->
    <!--    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>-->
    <!-- jquery.min.js文件 - jquery本身是js的框架. bootstrap依赖于jquery框架 -->
    <script src="/dev/plugins/jquery/jquery.min.js"></script>
    <!-- bootstrap.js/bootstrap.min.js -->
    <script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>
    <script>
        // 发送验证码
        function sendCode() {
            let email = $("#email").val();
            let email_span = document.getElementById("email_span");

            // 验证邮箱格式
            if (!validateEmail(email)) {
                email_span.textContent = "请输入正确的邮箱格式!";
                email_span.style.display = "";
                return;
            }

            // 发送验证码请求
            $.get(`/dev/user?email=${email}register`, function (res) {
                if (res.code == "404") {
                    email_span.style.display = "";
                } else {
                    email_span.style.display = "none";
                    alert("验证码已发送到您的邮箱!");

                    // 禁用按钮并开始倒计时
                    let btn = $("button:contains('发送验证码')");
                    btn.prop('disabled', true);
                    let countdown = 60;
                    btn.text(countdown + 's后重新获取');

                    const timer = setInterval(() => {
                        countdown--;
                        btn.text(countdown + 's后重新获取');
                        if (countdown <= 0) {
                            clearInterval(timer);
                            btn.prop('disabled', false);
                            btn.text('发送验证码');
                        }
                    }, 1000);
                }
            });
        }

        // 表单提交处理
        document.getElementById('registerForm').addEventListener('submit', function (e) {
            e.preventDefault();

            const email = document.getElementById('email').value;
            const code = document.getElementById('code').value;
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;

            // 表单验证
            if (!validateEmail(email)) {
                alert('请输入正确的邮箱格式');
                return;
            }

            if (password !== confirmPassword) {
                document.getElementById('password_span').style.display = "";
                return;
            }

            // 注册请求
            $.ajax({
                url: '/dev/user/register',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    email: email,
                    username: username,
                    password: code, // 使用验证码作为密码
                }),
                success: function (res) {
                    if (res.code == "200") {
                        // 保存token
                        localStorage.setItem("token", res.data);
                        alert("注册成功!");
                        window.location.href = '/dev/views/index.html';
                    } else {
                        alert(res.msg);
                    }
                },
                error: function () {
                    alert("注册失败，请稍后重试!");
                }
            });
        });

        // 邮箱格式验证
        function validateEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }
    </script>
</body>

</html>